import React, { useState } from 'react';
import '../components/Dataset/Dashboard.css';

interface Video {
  id: string;
  title: string;
  url: string;
  thumbnail: string;
}

const VideoPage: React.FC = () => {
  // 示例视频数据
  const [videos] = useState<Video[]>([
    {
      id: '1',
      title: '示例视频 1',
      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
      thumbnail: 'https://via.placeholder.com/300x200?text=Video+1'
    },
    {
      id: '2',
      title: '示例视频 2',
      url: 'https://www.w3schools.com/html/movie.mp4',
      thumbnail: 'https://via.placeholder.com/300x200?text=Video+2'
    }
  ]);

  const [currentVideo, setCurrentVideo] = useState<Video | null>(null);

  const handleVideoClick = (video: Video) => {
    setCurrentVideo(video);
    
    // 滚动到播放区域顶部
    const playerSection = document.getElementById('video-player-section');
    if (playerSection) {
      playerSection.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const handleLoadData = () => {
    // 这里添加加载数据的逻辑
    console.log('加载数据中...');
    // 模拟数据加载
    alert('数据加载完成!');
  };

  return (
    <div className="dashboard-container">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', marginBottom: '20px' }}>
        <h1>视频播放页面</h1>
        <button 
          onClick={handleLoadData}
          style={{
            padding: '10px 20px',
            backgroundColor: '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '5px',
            cursor: 'pointer',
            zIndex: 10
          }}
        >
          加载数据
        </button>
      </div>
      
      {/* 视频播放区域 - 顶部 */}
      <div id="video-player-section" style={{ width: '100%', maxWidth: '800px', margin: '0 auto', marginBottom: '30px', marginTop: '40px' }}>
        {currentVideo ? (
          <>
            <h2>{currentVideo.title}</h2>
            <video 
              src={currentVideo.url} 
              controls 
              autoPlay 
              style={{ width: '100%', height: 'auto' }}
            />
          </>
        ) : (
          <p>请点击下方视频开始播放</p>
        )}
      </div>

      {/* 视频列表区域 - 底部 */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
        {videos.map((video) => (
          <div 
            key={video.id} 
            onClick={() => handleVideoClick(video)}
            style={{ cursor: 'pointer', width: '300px' }}
          >
            <img 
              src={video.thumbnail} 
              alt={video.title} 
              style={{ width: '100%', height: 'auto' }}
            />
            <p>{video.title}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default VideoPage;